<template>
  <Dialogdrawerdefect
    :ddtvisible="visible"
    size="1000px"
    direction="rtl"
    :has-modal="true"
    :modal="true"
    :close-on-click-modal="true"
    :destroy-on-close="true"
    @close="handleClose">
    <div class="cont_box">
      <AppInfoTitle>
        <b class="fs-16">短信列表</b>
      </AppInfoTitle>
      <el-table
        size="medium"
        :data="messageData"
        style="width: 100%"
        border
        v-loading="loading"
        class="ky-table"
        highlight-current-row>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="code_two">
              <div class="c_col">
                <div class="c_lab">发送类型:</div>
                <div class="c_cnt">{{scope.row.sendType}}</div>
              </div>
            </div>
            <div class="code_two">
              <div class="c_col">
                <div class="c_lab">接收手机号码:</div>
                <div class="c_cnt">{{scope.row.receiveTel}}</div>
              </div>
            </div>
            <div class="code_two">
              <div class="c_col">
                <div class="c_lab">发送短信内容:</div>
                <div class="c_cnt">{{scope.row.sendText}}</div>
              </div>
            </div>
            <div class="code_two">
              <div class="c_col">
                <div class="c_lab">发送状态:</div>
                <div class="c_cnt">{{getSendStatus(scope.row.sendStatus)}}</div>
              </div>
            </div>
            <div class="code_two">
              <div class="c_col">
                <div class="c_lab">发送时间:</div>
                <div class="c_cnt">{{scope.row.sendTime}}</div>
              </div>
            </div>
            <div class="code_two">
              <div class="c_col">
                <div class="c_lab">信息添加时间:</div>
                <div class="c_cnt">{{scope.row.addTime}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sendType" label="发送类型" width="105" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag size="small" type="primary">{{scope.row.sendType}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="receiveTel" label="接收手机号码" width="110"></el-table-column>
        <el-table-column prop="sendText" label="发送短信内容" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="发送状态" width="80">
          <template v-slot="scope">
            <div>
              <el-tag size="small" type="primary">{{getSendStatus(scope.row.sendStatus)}}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sendTime" label="发送时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="addTime" label="信息添加时间" width="152"></el-table-column>
      </el-table>
      <div class="log_total" v-if="messageData.length>0">共：{{messageData.length}} 条</div>
      <div class="buttons">
        <div class="right-buttons">
          <el-button size="small" @click="handleClose">关 闭</el-button>
        </div>
      </div>
    </div>
  </Dialogdrawerdefect>
</template>
<script>
import Dialogdrawerdefect from '@/components/dialogbox/dialogDrawer'
import AppInfoTitle from '@/components/appInfoTitle/index'
import { getMessageLog } from '@/api/api.js'
export default {
  name: 'MessageDialog',
  components: {
    Dialogdrawerdefect,
    AppInfoTitle
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    id: {
      String,
      default: ''
    },
    hospitalCode: {
      String,
      default: ''
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  data() {
    return {
      tableData: [],
      allContentArr: {},
      messageData: [],
      loading: false,
      showTextarea: false
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    getSendStatus(checkStatus) {
      // 1：已路由，2：已发送，0：未路由，3：发送失败
      let checkStatuss = [{ value: 1, label: '已路由' }, { value: 2, label: '已发送' }, { value: 0, label: '未路由' }, { value: 3, label: '发送失败' }]
      let checkSta = ''
      checkStatuss.forEach(element => {
        if (parseInt(element.value) === parseInt(checkStatus)) {
          checkSta = element.label
        }
      })
      return checkSta
    },
    async getMessageLog(id) {
      await this.$getHospitalList()
      this.loading = true
      getMessageLog({ AccessNo: id, hospitalCode: this.hospitalCode }).then(res => {
        if (res && res.code === 10000) {
          this.loading = false
          this.messageData = JSON.parse(JSON.stringify(res.content.list))
          // this.showMessageLogOrshowAppoint(0)
        }
      })
      // console.error('来这里了', this)
    }
  }
}
</script>
<style lang="scss" scoped>
    .code{
      padding:20px;
      background-color: #263444;
      color: #fff;
      font-size: 13px;
      line-height: 1.5em;
      .c_col{
        display: flex;
        margin-bottom: 6px;
        .c_lab{
          width: 100px;
        }
        .c_cnt{
          flex: 1;
        }
      }
    }
    .code_two{
      padding:10px;
      background-color: #263444;
      color: #fff;
      font-size: 13px;
      /* line-height: 1.5em; */
      .c_col{
        display: flex;
        margin-bottom: 6px;
        .c_lab{
          width: 100px;
        }
        .c_cnt{
          flex: 1;
        }
      }
    }
    .log_total{
      font-size: 14px;
      margin-top: 20px;
    }
    /* .cont_box_two {
        padding: 19px 19px;
        overflow-y: auto;
    } */
</style>
